<!--  -->
<template>
    <div>
        <!-- 搜索 -->
          
      <div class="order_Search_box">
        <div>
              <el-col>订单号：<el-input v-model="input_order" placeholder="请输入订单号"></el-input></el-col>
        </div>
        <div>
            <span>订单状态：</span>
        <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in reject_state" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>

        </div>
        <div>
            <el-button type="primary" @click="shousuo(input_order,value)" icon="el-icon-search">搜索</el-button>
        </div>

      </div>

    <div class="tbhead_head">
      <div class="w40 tbhead"><span>订单信息</span></div>
      <div class="w12 tbhead"><span>退款金额</span></div>
      <div class="w12 tbhead"><span>申请时间</span></div>
      <div class="w12 tbhead"><span>退款状态</span></div>
      <div class="w12 tbhead"><span>查看详情</span></div>
    </div>
    <div class="tb_tybd" v-for="(item) in order" :key="item.orderId" > <!-- 循环 v-for -->
        <div class="reject_a">
            <div class=""><span>订单编号：{{item.orderCode}}</span></div>
            <div class=""><span>申请时间：</span></div>
        </div>
            
        <div class="order_tb">
            <div class="w40 order_spname">
                <div><el-image :src="item.goods.goodsImg"></el-image> </div>
                <div><p>{{item.goods.goodsName}}</p></div>
            </div>
            <div class="w12 h">￥{{item.orderGoodsPrice*item.orderGoodsNum}}</div>
            <div class="w12 h">申请时间</div>
            <div class="w12 h" v-if="item.orderIsDone==2">退款申请中</div>
            <div class="w12 h" v-if="item.orderIsDone==3">已退款</div>

            <div class="w12 h"><el-button type="primary"  @click="refunddetails(item.orderId)"  >查看详情</el-button></div>
        </div>
    </div>
    
    

    </div>
</template>

<script>
export default {
name : 'rejectOrder',
data() {
    return {
        reject_state:[
            {value:2,label:"退款申请中"},
            {value:3,label:"已退款"}
        ],
        order:[],
        value: '',   
        input_order:'' 
    }
},
methods:{
    refunddetails(orderId){
       this.$router.push({path:'refunddetails',query:{orderId:orderId}})
    },
    shousuo(input_order,value){
        this.$axios.post('/api/order/orderList?orderCode='+input_order+'&orderIsDone='+value).then((res)=>{
    this.order=res.data.data;
    console.log(this.order) 
 }).catch((err)=>{console.log("失败")})

    }

},
created(){
    this.$axios.post('/api/order/orderList?page=1&orderIsDone=3').then((res)=>
    {
      this.order=res.data.data;
      
      // console.log(res.data)
      console.log(this.order)  
    }).catch((err)=>{console.log("失败")})
  }

  }
</script>

<style  scoped>
.order_Search_box{
    height: 100px;
    display: flex;
    align-items: center;
    border-bottom: 10px #F5F7FA solid;
}
.tb_tybd:hover{
    background-color: #F5F7FA;
}
.order_Search_box>div{
    margin-left: 25px;
    display: flex;
     align-items: center;
}
.el-input{
    width: 200px;
}
.tbhead>div{
margin-left: 30px;
}
.tbhead_head{
  margin-top: 20px;
  background-color: #F7F9FA;
  text-align: center;
  line-height: 40px;
  height: 40px;
 
}
.h{
    height: 100%;
}
.tbhead{
    float: left;
    font-size: 15px ;
    font-weight:bold;
    color: #666666;
     /* border: 1px solid red; */
}
.w40{
    width: 40%;
}
.w12{
    width: 12%;
}
.order_tb,.order_spname{
    overflow: hidden;
}
.el-image{
  margin-top:20px ;
  margin-left: 100px;
  margin-right: 20px;
    width: 120px;
    height: 60px;
}
.order_tb>div,.order_spname>div{
  float: left;
  
}
.order_tb{
    height: 100px;
}

.tb_tybd{
  margin-top: 10px;
  width: 100%;
  text-align: center;
  
 line-height: 70px;
  border-bottom: solid 1px  #ebeef5;
}
.reject_a{
    overflow: hidden;
    margin-top: 20px;
    background-color: #F7F9FA;
    height: 40px;
    line-height: 40px;
}
.reject_a>div{
    float: left;
    margin-left: 30px;
}

</style>
